<template>
  <header class="warp-content">
    <h1>
      <i @click="showDrawer" class="iconfont icon-sanheng"></i>
      DJ's Blog
    </h1>
    <ul class="menu-pc">
      <li
        v-for="item in nav"
        :key="item.path"
        :class="$route.path == item.path ? 'active' : ''"
        @click="togglePath(item.path)"
      >
        <i :class="`iconfont ${item.icon}`" />
        {{ item.name }}
      </li>
      <!-- <li><i class="iconfont icon-fenlei" /> 分类</li>
      <li><i class="iconfont icon-label" /> 友链</li>
      <li><i class="iconfont icon-mine" /> 关于</li> -->
    </ul>
  </header>
</template>

<script>
export default {
  data() {
    return {
      nav: [
        { name: "首页", path: "/home", icon: "icon-home" },
        { name: "分类", path: "/category", icon: "icon-fenlei" },
        { name: "工具", path: "/link", icon: "icon-label" },
        { name: "关于", path: "/about", icon: "icon-mine" }
      ]
    };
  },
  methods: {
    togglePath(path) {
      if (path != this.$route.path || path != this.$route.fullPath) {
        this.$router.push(path);
      }
    },
    showDrawer() {
      // console.log(this.$refs.infoDrawer.toggleDrawer());
      this.$store.commit("showDrawer");
    }
  }
};
</script>

<style lang="scss" scoped>
header {
  color: #333;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 6px 8px -12px #000;

  h1 {
    font-weight: 700;
    font-size: 20px;
  }
  ul.menu-pc {
    display: flex;
    margin-right: 60px;
    li {
      width: 90px;
      text-align: center;
      cursor: pointer;
      color: #333333b6;
      &.active,
      &:hover {
        color: #333;
      }
    }
  }

  .iconfont {
    margin-right: 6px;
  }
}

.icon-sanheng {
  display: none;
  font-size: 20px;
  width: 30px;
  height: 60px;
  text-align: left;
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 576px) {
  ul.menu-pc {
    display: none !important;
  }

  .icon-sanheng {
    display: inline-block;
    margin-left: 20px;
  }
}
</style>
